<template>
  <div class="editReply">
    <wangEidtor
      :editId="editId"
      :placeholder="getPlaceHolder"
      :menus="menus"
      :disabled="disabled"
      @change="handelKeyDown(true, $event)"
      @uploadImage="uploadImage"
      ref="edit"
    />
    <el-button type="primary" @click="confirm" :disabled="!content"
      >发表</el-button
    >
  </div>
</template>

<script>
import { debounce } from "@/util/tool";
const wangEidtor = () => import("@/components/wangEditor/index.vue");
export default {
  components: { wangEidtor },
  data() {
    return {
      content: "",
    };
  },
  props: {
    editId: String,
    menus: Array,
    disabled: Boolean,
    placeholder: String,
  },
  watch: {
    placeholder(n) {
      const el = this.$refs.edit.editor.$textContainerElem?.elems?.[0]?.getElementsByClassName('placeholder')?.[0]
      if (el) {
        el.innerText = n
        el.innerHtml = n
      }
    }
  },
  computed: {
    getPlaceHolder() {
      return this.placeholder
    }
  },
  methods: {
    handelKeyDown: debounce(
      function (immediate, data) {
        this.content = data.data;
      },
      0,
      false
    ),
    // 清空富文本编辑器的内容
    confirm() {
      this.$emit("confirm", this.content);
      this.$refs.edit.editor.txt.clear();
    },
    // 上传图片回调
    uploadImage() {
      this.$emit("uploadImage", ...arguments)
    }
  },
};
</script>

<style lang="stylus">
.editReply {
  display: flex;

  .wangEditor {
    flex: 1;
    margin-right: 20px;
  }

  button {
    // margin-top: 10px;
    height: 40px;
  }
}
</style>